import * as React from 'react';
import {BaseComponent} from 'fe-lib';
import './index.less';

const MENUS = [
  {href: '/datasource', name: '数据源', default: true},
  {href: '/comparison', name: '分析对比'},
  {href: '/testcase', name: '测试用例'},
];

class Header extends BaseComponent {

  render() {
    const {loginInfo}=this.props;
    return (
      <div className="web-header">
        <div className="web-box">
          <div className="web-header-appname">插件测试工具</div>
          <div className="web-header-nav flex-grow-1">
            {
              MENUS.map(item => {
                const classnames = ["web-header-nav-item"];
                this.activeMenu(item) ? classnames.push("web-header-nav-item-active") : null;
                return <a key={item.href} className={classnames.join(' ')} href={`#${item.href}`}>{item.name}</a>
              })
            }
          </div>
          <div className="web-header-user web-box">
            <div className="web-header-user-icon">
              <img/>
            </div>
            <div className="web-header-user-name">{loginInfo.getIn(['data', 'name'])}</div>
          </div>
        </div>
      </div>
    );
  }

  activeMenu(item) {
    const {pathname}=this.props;
    if (pathname == '/') {
      return item.default;
    } else {
      return item.href.indexOf(pathname) >= 0;
    }
  }

}

export default Header;
